<template>
  <view>
    <image style="width: 100%;height: 101vh;" src="/static/images/login-background.jpg" />
    <view class="login-btn">
      <view class="title" style="margin: 26rpx 90rpx;font-size: 23px;">有电充后台管理系统登录</view>
      <view class="login-form-content">
        <view class="input-item">
          <view class="iconfont icon-user icon"></view>
          <input type="text" placeholder="请输入账号" v-model="loginForm.username" maxlength="30" class="input">
        </view>
        <view class="input-item" style="margin: 20rpx 0;">
          <view class="iconfont icon-password icon"></view>
          <input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
        </view>
        <view class="flex" style="margin-bottom: 20rpx;" v-if="captchaEnabled">
          <view class="input-item" style="width: 60%;">
            <view class="iconfont icon-code icon"></view>
            <input v-model="loginForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="4"
              @confirm="handleLogin" />
          </view>
          <view class="login-code" style="">
            <image :src="codeUrl" @click="getCode" class="login-code-img"></image>
          </view>
        </view>
        <view class="">
          <checkbox-group @change="checkboxChange">
            <checkbox id="chkRem" :checked="rememberPsw" @tap="rememberPsw = ! rememberPsw" color="#09cc86" />
            记住账号密码
          </checkbox-group>
        </view>
        <view class="action-btn">
          <button @click="handleLogin" class=" cu-btn block lg round "
            style="border-radius: 40rpx;background-color: #1890ff;">登 录</button>
        </view>
      </view>
    </view>
    <view class="el-login-footer">
      <span>Copyright © 2016-2022 Jsowell All Rights Reserved.</span>
    </view>

    <!-- <view class="xieyi text-center">
      <text class="text-grey1">登录即代表同意</text>
      <text @click="handleUserAgrement" class="text-blue">《用户协议》</text>
      <text @click="handlePrivacy" class="text-blue">《隐私协议》</text>
    </view> -->
  </view>
</template>

<script>
  import {
    getCodeImg
  } from '@/api/login'
  export default {
    data() {
      return {
        rememberPsw: true,
        codeUrl: "",
        captchaEnabled: true,
        globalConfig: getApp().globalData.config,
        loginForm: {
          username: "",
          password: "",
          code: "",
          uuid: ''
        }
      }
    },
    created() {
      this.getCode()
    },
    mounted() {
      const HCname = uni.getStorageSync('HCname')
      const HCpassword = uni.getStorageSync('HCpassword')
      console.log('缓存的账号', HCname, '以及密码', HCpassword);
      if (HCname && HCpassword) {
        this.loginForm.username = HCname
        this.loginForm.password = HCpassword
      } else {
        this.loginForm.username = ''
        this.loginForm.password = ''
      }
    },
    methods: {
      checkboxChange(e) {
        console.log('勾选状态', e.detail.value.length);
        if (e.detail.value.length == 1) {
          uni.getStorageSync('HCname')
          uni.getStorageSync('HCpassword')
        } else {
          uni.removeStorageSync('HCname')
          uni.removeStorageSync('HCpassword')
        }
      },
      // 隐私协议
      handlePrivacy() {
        let site = this.globalConfig.appInfo.agreements[0]
        this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
      },
      // 用户协议
      handleUserAgrement() {
        let site = this.globalConfig.appInfo.agreements[1]
        this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
      },
      // 获取图形验证码
      getCode() {
        getCodeImg().then(res => {
          this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
          if (this.captchaEnabled) {
            this.codeUrl = 'data:image/gif;base64,' + res.img
            this.loginForm.uuid = res.uuid
          }
        })
      },
      // 登录方法
      async handleLogin() {
        console.log(this.rememberPsw, 'this.rememberPsw');
        if (this.loginForm.username === "") return this.$modal.msgError("请输入您的账号")
        if (this.loginForm.password === "") return this.$modal.msgError("请输入您的密码")
        if (this.loginForm.code === "" && this.captchaEnabled) return this.$modal.msgError("请输入验证码")
        this.$modal.loading("登录中，请耐心等待...")
        this.pwdLogin()
      },
      // 密码登录
      async pwdLogin() {
        this.$store.dispatch('Login', this.loginForm).then(() => {
          this.$modal.closeLoading()
          this.loginSuccess()
          // 登录成功后保存账号或秘密
          if (this.rememberPsw) {
            uni.setStorageSync('HCname', this.loginForm.username)
            uni.setStorageSync('HCpassword', this.loginForm.password)
          } else {
            uni.removeStorageSync('HCname')
            uni.removeStorageSync('HCpassword')
          }
        }).catch(() => {
          if (this.captchaEnabled) {
            this.getCode()
          }
        })
      },
      // 登录成功后，处理函数
      loginSuccess() {
        // 设置用户信息
        this.$store.dispatch('GetInfo').then(res => {
          this.$tab.reLaunch('/pages/revenue/revenue')
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .login-form-content {
    padding: 20rpx;
  }

  .login-code-img {
    width: 200rpx;
    height: 80rpx;
    margin-left: 160rpx;
  }

  .input {
    margin-left: 20rpx;
    width: 100%;
  }

  .input-item {
    display: flex;
    align-items: center;
    padding: 10rpx;
    border: 1px solid gray;
    border-radius: 40rpx;
  }

  .login-btn {
    position: fixed;
    top: 25%;
    bottom: 25%;
    // width: 510rpx;
    // margin: 0 118rpx 0 122rpx;
    background-color: #fff;
    color: black;
  }

  .action-btn {
    margin-top: 20rpx;
  }

  .el-login-footer {
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    font-family: Arial;
    font-size: 12px;
    letter-spacing: 1px;
  }
</style>